<template>
  <div class="afterInvestDel-page">
    <pubChunk :mt="20">
      <span slot="title">历史净值</span>
      <div slot="headLeft" class="cutTableChart_icon">
        <el-button
          style="margin-left: 15px"
          class="bg-green search-box download-btn"
          size="small"
          @click="exportNetWorthHandle"
        >
          导出净值
        </el-button>
      </div>
      <div class="showChunk">
        <el-table
          v-loading="listLoading_netWorth"
          :data="list_netWorth"
          stripe
          fit
          size="mini"
          :cell-style="{ padding: '8px 0' }"
          :header-cell-style="{ color: '#333' }"
          style="width: 100%"
        >
          <el-table-column
            type="index"
            label="序号"
            align="center"
            width="60"
          ></el-table-column>
          <!-- <el-table-column prop="compositionName" label="组合名称" align="center" min-width="180" show-overflow-tooltip></el-table-column> -->
          <el-table-column
            prop="networthTime"
            label="净值日期"
            align="center"
            min-width="100"
          >
            <template slot-scope="{ row }">
              <span>{{ row.networthTime | parseTime }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="networthValue"
            label="单位净值"
            align="center"
            min-width="100"
          ></el-table-column>
          <el-table-column
            prop="networthValue"
            label="累计净值"
            align="center"
            min-width="100"
          ></el-table-column>
          <el-table-column
            prop="virNetWorthValue"
            label="虚拟净值"
            width="130"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="investEquity"
            label="资产金额(元)"
            width="140"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="investShare"
            label="资产份额(份)"
            width="140"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="networthValue"
            label="复权累计净值"
            align="center"
            min-width="100"
          ></el-table-column>
          <el-table-column
            prop="pnl"
            label="涨跌幅"
            align="center"
            min-width="100"
          >
            <template slot-scope="{ row }">
              <span
                v-if="row.pnl != null"
                :class="row.pnl >= 0 ? 'positiveFc' : 'negativeFc'"
              >
                {{ row.pnl }}%
              </span>
              <span v-else>--</span>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-if="total_netWorth > 0"
          style="padding-bottom: 0"
          :total="total_netWorth"
          :page.sync="listQuery.pageCurrent"
          :limit.sync="listQuery.limit"
          @pagination="HistoryNetworthListHandle"
        />
      </div>
    </pubChunk>
  </div>
</template>
<script>
import pubChunk from "@/components/investComn/pubChunk.vue";
import { HistoryNetworthList } from "@/api/combManage";
import { exportNetWorth } from "@/api/policyManage";
import Pagination from "@/components/Pagination";
export default {
  components: { pubChunk, Pagination },
  data() {
    return {
      params: {
        compositionId: "",
      },
      listQuery: {
        pageCurrent: 1,
        limit: 10,
      },
      list_netWorth: [], //历史净值
      total_netWorth: 0,
      listLoading_netWorth: false,
    };
  },
  props: {
    userId: {
      type: String | Number,
    },
    id: {
      type: String | Number,
      default: "",
    },
    compositionName: {
      type: String | Number,
      default: "",
    },
  },
  created() {},
  mounted() {},
  watch: {
    id: {
      handler(newVal, oldVal) {
        this.params.compositionId = newVal;
        this.HistoryNetworthListHandle();
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    // 历史净值
    HistoryNetworthListHandle() {
      this.listLoading_netWorth = true;
      HistoryNetworthList({
        ...this.params,
        ...this.listQuery,
        userId: this.userId,
      }).then((res) => {
        this.listLoading_netWorth = false;
        console.log("历史净值", res);
        this.list_netWorth = res.body.list;
        this.total_netWorth = res.body.total;
      });
    },
    exportNetWorthHandle() {
      // 下载净值案例
      exportNetWorth({
        contextStatus: 1,
        contextId: this.params.compositionId,
      }).then((res) => {
        const content = res;
        const blob = new Blob([content]);
        const fileName = this.compositionName + "净值（组合）.xlsx";
        if ("download" in document.createElement("a")) {
          // 非IE下载
          const elink = document.createElement("a");
          elink.download = fileName;
          elink.style.display = "none";
          elink.href = URL.createObjectURL(blob);
          document.body.appendChild(elink);
          elink.click();
          URL.revokeObjectURL(elink.href); // 释放URL 对象
          document.body.removeChild(elink);
        } else {
          // IE10+下载
          navigator.msSaveBlob(blob, fileName);
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.afterInvestDel-page {
  .title {
    font-size: 26px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #262626;
  }
}
</style>
